<!-- 订单总览 -->
<template>
  <div>
    <el-container>
      <el-header class="nav_hd">
        <span>万事达-TMS<span class="textColor">客户端</span></span>
        <div>
          <i class="iconfont icon-svg45-copy"></i>
          <a href="#" class="exit">退出系统</a>
        </div>
      </el-header>
      <el-main>
        <div class="main_title">订单管理-询价单</div>
        <!-- 表单栏 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <!-- 选择查询方法 -->
          <el-form-item>
            <el-select v-model="formInline.title">
              <el-option label="收货人" value="1"></el-option>
              <el-option label="始发地" value="2"></el-option>
              <el-option label="目的地" value="3"></el-option>
              <el-option label="订单号" value="4"></el-option>
              <el-option label="运货单" value="5"></el-option>
              <el-option label="货名" value="6"></el-option>
            </el-select>
          </el-form-item>
          <!-- 查询方法对应的值 -->
          <el-form-item>
            <el-input v-model="formInline.value"></el-input>
          </el-form-item>
          <!-- 选择时间类型 -->
          <el-form-item class="mleft">
            <el-select v-model="formInline.timeType">
              <el-option
                label="下单时间"
                value="xd_time"
                aria-selected="selected"
              ></el-option>
              <el-option label="报价有效截止时间" value="jz_time"></el-option>
            </el-select>
          </el-form-item>
          <!-- 选择时间 -->
          <el-form-item required>
            <el-col :span="11">
              <el-form-item prop="date1">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="ruleForm.date1"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="1">-</el-col>
            <el-col :span="11">
              <el-form-item prop="date2">
                <el-date-picker
                  placeholder="选择时间"
                  v-model="ruleForm.date2"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <!-- button -->
          <el-form-item>
            <el-button>搜索</el-button>
          </el-form-item>
        </el-form>
        <!-- tab选项卡 -->
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="全部（20）" name="first">
            <el-form>
              <el-form-item>
                <el-button @click="toCheck">审核</el-button>
                <el-button @click="toSolveCheck">询价处理</el-button>
                <el-button @click="toSurePrice">确认报价</el-button>
                <el-button>新增订单</el-button>
                <el-button>导入</el-button>
              </el-form-item>
            </el-form>
            <el-table :data="tableData" stripe style="width: 100%" >
                <el-table-column label="" width="65">
                  <template slot-scope="scope">
                      <el-radio class="radio" v-model="templateSelection" :label="scope.$index"></el-radio>
                  </template>
                </el-table-column>
                <el-table-column prop="number" label="订单号"> </el-table-column>
                <el-table-column prop="xd_time" label="下单时间"></el-table-column>
                <el-table-column prop="fc_time" label="合同编号"></el-table-column>
                <el-table-column prop="dd_time" label="始发地"></el-table-column>
                <el-table-column prop="start_place" label="目的地"></el-table-column>
                <el-table-column prop="arv_place" label="收货方"></el-table-column>
                <el-table-column prop="goods" label="货物名称"></el-table-column>
                <el-table-column prop="weight" label="重量（kg）"></el-table-column>
                <el-table-column prop="end_time" label="运输费（￥）"></el-table-column>
                <el-table-column prop="static" label="回单时间"></el-table-column>
              </el-table>
              <div class="block">
                <span class="demonstration">完整功能</span>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400">
                </el-pagination>
              </div>
          </el-tab-pane>
          <el-tab-pane label="待审核（5）" name="second">
              <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column prop="number" label="订单号"> </el-table-column>
                <el-table-column prop="xd_time" label="下单时间"></el-table-column>
                <el-table-column prop="fc_time" label="合同编号"></el-table-column>
                <el-table-column prop="dd_time" label="始发地"></el-table-column>
                <el-table-column prop="start_place" label="目的地"></el-table-column>
                <el-table-column prop="arv_place" label="收货方"></el-table-column>
                <el-table-column prop="goods" label="货物名称"></el-table-column>
                <el-table-column prop="weight" label="重量（kg）"></el-table-column>
                <el-table-column prop="end_time" label="运输费（￥）"></el-table-column>
                <el-table-column prop="static" label="回单时间"></el-table-column>
              </el-table>
              <div class="block">
                <span class="demonstration">完整功能</span>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400">
                </el-pagination>
              </div>
          </el-tab-pane>
          <el-tab-pane label="等待询价处理（3）" name="third">
            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column prop="number" label="订单号"> </el-table-column>
                <el-table-column prop="xd_time" label="下单时间"></el-table-column>
                <el-table-column prop="fc_time" label="合同编号"></el-table-column>
                <el-table-column prop="dd_time" label="始发地"></el-table-column>
                <el-table-column prop="start_place" label="目的地"></el-table-column>
                <el-table-column prop="arv_place" label="收货方"></el-table-column>
                <el-table-column prop="goods" label="货物名称"></el-table-column>
                <el-table-column prop="weight" label="重量（kg）"></el-table-column>
                <el-table-column prop="end_time" label="运输费（￥）"></el-table-column>
                <el-table-column prop="static" label="回单时间"></el-table-column>
              </el-table>
              <div class="block">
                <span class="demonstration">完整功能</span>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400">
                </el-pagination>
              </div>
          </el-tab-pane>
          <el-tab-pane label="询价中（2）" name="forth"> 
            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column prop="number" label="订单号"> </el-table-column>
                <el-table-column prop="xd_time" label="下单时间"></el-table-column>
                <el-table-column prop="fc_time" label="合同编号"></el-table-column>
                <el-table-column prop="dd_time" label="始发地"></el-table-column>
                <el-table-column prop="start_place" label="目的地"></el-table-column>
                <el-table-column prop="arv_place" label="收货方"></el-table-column>
                <el-table-column prop="goods" label="货物名称"></el-table-column>
                <el-table-column prop="weight" label="重量（kg）"></el-table-column>
                <el-table-column prop="end_time" label="运输费（￥）"></el-table-column>
                <el-table-column prop="static" label="回单时间"></el-table-column>
              </el-table>
              <div class="block">
                <span class="demonstration">完整功能</span>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400">
                </el-pagination>
              </div>
          </el-tab-pane>
          <el-tab-pane label="等待添加报价（2）" name="fifth"> 
            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column prop="number" label="订单号"> </el-table-column>
                <el-table-column prop="xd_time" label="下单时间"></el-table-column>
                <el-table-column prop="fc_time" label="合同编号"></el-table-column>
                <el-table-column prop="dd_time" label="始发地"></el-table-column>
                <el-table-column prop="start_place" label="目的地"></el-table-column>
                <el-table-column prop="arv_place" label="收货方"></el-table-column>
                <el-table-column prop="goods" label="货物名称"></el-table-column>
                <el-table-column prop="weight" label="重量（kg）"></el-table-column>
                <el-table-column prop="end_time" label="运输费（￥）"></el-table-column>
                <el-table-column prop="static" label="回单时间"></el-table-column>
              </el-table>
              <div class="block">
                <span class="demonstration">完整功能</span>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400">
                </el-pagination>
              </div>
          </el-tab-pane>
          <el-tab-pane label="已到期询价（2）" name="sixth"> 
            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column prop="number" label="订单号"> </el-table-column>
                <el-table-column prop="xd_time" label="下单时间"></el-table-column>
                <el-table-column prop="fc_time" label="合同编号"></el-table-column>
                <el-table-column prop="dd_time" label="始发地"></el-table-column>
                <el-table-column prop="start_place" label="目的地"></el-table-column>
                <el-table-column prop="arv_place" label="收货方"></el-table-column>
                <el-table-column prop="goods" label="货物名称"></el-table-column>
                <el-table-column prop="weight" label="重量（kg）"></el-table-column>
                <el-table-column prop="end_time" label="运输费（￥）"></el-table-column>
                <el-table-column prop="static" label="回单时间"></el-table-column>
              </el-table>
              <div class="block">
                <span class="demonstration">完整功能</span>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400">
                </el-pagination>
              </div>
          </el-tab-pane>
          <el-tab-pane label="已完成报价（2）" name="seventh"> 
            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column prop="number" label="订单号"> </el-table-column>
                <el-table-column prop="xd_time" label="下单时间"></el-table-column>
                <el-table-column prop="fc_time" label="合同编号"></el-table-column>
                <el-table-column prop="dd_time" label="始发地"></el-table-column>
                <el-table-column prop="start_place" label="目的地"></el-table-column>
                <el-table-column prop="arv_place" label="收货方"></el-table-column>
                <el-table-column prop="goods" label="货物名称"></el-table-column>
                <el-table-column prop="weight" label="重量（kg）"></el-table-column>
                <el-table-column prop="end_time" label="运输费（￥）"></el-table-column>
                <el-table-column prop="static" label="回单时间"></el-table-column>
              </el-table>
              <div class="block">
                <span class="demonstration">完整功能</span>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400">
                </el-pagination>
              </div>
          </el-tab-pane>

        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  name: "DDManager",
  data() {
    return {
      formInline: {
        title: "",
        value: "",
        timeType: "",
      },
      ruleForm: {
        date1: "",
        date2: "",
      },
      activeName: "first",
      tableData: [
        {
           number:"abc",
           xd_time:"abc",
           fc_time:"abc",
           dd_time:"abc",
           start_place:"abc",
           arv_place:"abc",
           goods:"abc",
           weight:"abc",
           end_time:"abc",
           static:"abc"
        },
        {
           number:"abc----",
           xd_time:"abc----",
           fc_time:"abc----",
           dd_time:"abc----",
           start_place:"abc----",
           arv_place:"abc----",
           goods:"abc----",
           weight:"abc----",
           end_time:"abc----",
           static:"abc----"
        }
      ],
      tab_title: [
        {
          prop: "number",
          title: "订单号",
        },
        {
          prop: "xd_time",
          title: "下单时间",
        },
        {
          prop: "fc_time",
          title: "计划发车时间",
        },
        {
          prop: "dd_time",
          title: "计划到达时间",
        },
        {
          prop: "start_place",
          title: "始发地",
        },
        {
          prop: "arv_place",
          title: "目的地",
        },
        {
          prop: "goods",
          title: "货物",
        },
        {
          prop: "weight",
          title: "重量（kg）",
        },
        {
          prop: "end_time",
          title: "报价有效截止日期",
        },
        {
          prop: "static",
          title: "状态",
        },
      ],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      templateSelection: ''
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    clickitem (e) {
      e === this.radio2 ? this.radio2 = '' : this.radio2 = e
    },
    toCheck(){
      this.$router.push('/client/order/CreateMenu');
    },
    toSolveCheck(){
      this.$router.push('/client/order/addorder');
    },
    toSurePrice(){
      this.$router.push('/client/order/corder')
    },
  },
};
</script>
<style lang="less" scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  // text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  // text-align: center;
}
.main_title {
  height: 32px;
  background-color: #b3c0d1;
  margin-bottom: 10px;
  padding-left: 5px;
  padding-top: 5px;
}
.mleft {
  margin-left: 30px;
}
/deep/.el-main {
    background-color: #e9eef3;
    color: #333;
    text-align: left;
}
/deep/.el-tabs__item {
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  background-color: #b3c0d1;
  border-radius: 3px;
  // border: 1px solid #b3c0d1;
}

/deep/.el-tabs__item:hover {
  cursor: pointer;
  background-color: #c8cfd8bb;
  color: black;
}
/deep/.el-tabs__item.is-active {
  color: black;
  background-color: #c8cfd8bb;
}
.textColor{
  color: red;
}
.nav_hd{
  display: flex;
  justify-content: space-between;
}
/deep/.el-table td, .el-table th.is-leaf {
    border: 1px solid;
}
</style>